<template>
  <div class="store-main">
    <div class="header-store">
      <div class="header">
        <span @click="goBack"><van-icon name="arrow-left"/></span>
        <!-- <span><img src="../../assets/image/icon-right.png" alt=""></span> -->
      </div>
      <div class="shop-nav">
        <div @click="collect(1)" v-if="isCollect === 0" class="collect-bar">
          <van-icon name="star-o"/>
          <!--          收藏-->
          {{ $t('h.B020') }}
        </div>
        <div v-if="isCollect === 1" @click="collect(0)" class="collect-bar">
          <van-icon name="star"/>
          <!--          已收藏-->
          {{ $t('h.B120') }}
        </div>
        <div class="left">
          <img :src="shopInfo.avatar" alt=""/>
          <div class="store-name-container">
            <div class="name">{{ shopInfo.title }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="store-nav">
      <van-tabs color="#002FFF" v-model="active">
        <van-tab :title="$t('h.B027')">
          <div class="goods-list">
            <van-list
                v-model="liveLoading"
                :finished="liveFinished"
                :loading-text="$t('h.LIST_LOADING')"
                :finished-text="$t('h.LIST_NO_MORE')"
                @load="liveOnLoad"
            >
              <div class="product-item">
                <div
                    @click="toClick('/goods', items)"
                    v-for="(items, index1) in liveList"
                    :key="index1"
                    class="item"
                >
                  <img :src="items.mainimage" alt=""/>
                  <p class="item-price">$ {{ items.money }}</p>
                  <!--                卖出-->
                  <p class="item-sale">
                    {{ $t('h.B021') }} {{ items.sales_volume }}
                  </p>
                  <p class="item-content">{{ items.name }}</p>
                </div>
              </div>
            </van-list>
          </div>
        </van-tab>
        <!--        商品-->
        <van-tab :title="$t('h.B028')">
          <div class="give-other-list">
            <!--            <div class="product-nav margin-top">-->
            <!--              <img @click="showProduct=true" class="search" src="@/assets/image/menu.png" alt="">-->
            <!--              <div class="nav">-->
            <!--                <div class="input">-->
            <!--                  <img src="@/assets/image/search-o.png" alt="">-->
            <!--                  <input type="text" :placeholder="$t('h.B029')">-->
            <!--                </div>-->
            <!--              </div>-->
            <!--            </div>-->
            <!--            <div class="product-nav product-top">-->
            <!--              <div class="item-nav center">{{ $t('h.B022') }}</div>-->
            <!--              <div class="item-nav center">{{ $t('h.B023') }}-->
            <!--                <img src="@/assets/image/sort.jpeg" alt="">-->
            <!--              </div>-->
            <!--              <div class="item-nav center">{{ $t('h.B024') }}-->
            <!--                <img src="@/assets/image/sort.jpeg" alt="">-->
            <!--              </div>-->
            <!--              <div class="item-nav center">{{ $t('h.B025') }}-->
            <!--                <img src="@/assets/image/sort.jpeg" alt="">-->
            <!--              </div>-->
            <!--            </div>-->
            <div class="product-nav-goods">
              <van-list
                  v-model="allLoading"
                  :finished="allFinished"
                  :finished-text="$t('h.LIST_NO_MORE')"
                  :loading-text="$t('h.LIST_LOADING')"
                  @load="allOnLoad"
              >
                <div class="product-box">
                  <div
                      @click="toClick('/goods', items)"
                      v-for="(items, index1) in allList"
                      :key="index1"
                      class="item"
                  >
                    <div v-if="active === 2" class="item-tip">
                      <p>1%</p>
                      <p>OFF</p>
                    </div>
                    <img :src="items.mainimage" alt=""/>
                    <p class="item-price">$ {{ items.money }}</p>
                    <!--                    月销量-->
                    <p class="item-sale">
                      {{ $t('h.B026') }} {{ items.sales_volume }}
                    </p>
                    <p class="item-content">{{ items.name }}</p>
                  </div>
                </div>
              </van-list>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import {requestFollowStoreApi, shopDetails} from '@/api/apiFox';
import {Toast} from 'vant';
import {mapGetters} from 'vuex';

export default {
  computed: {
    ...mapGetters(['isLogin'])
  },
  data() {
    return {
      active: 0,
      isCollect: 0,
      goods: [
        {
          id: 1,
          image:
              'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
          price: 35.11,
          sale: 200,
          content: 'KwikSafety 北卡罗来纳州夏洛特 THU... ',
        },
        {
          id: 2,
          image:
              'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
          price: 35.12,
          sale: 200,
          content: 'KwikSafety 北卡罗来纳州夏洛特 THU... ',
        },
        {
          id: 3,
          image:
              'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
          price: 35.13,
          sale: 200,
          content: 'KwikSafety 北卡罗来纳州夏洛特 THU... ',
        },
        {
          id: 4,
          image:
              'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
          price: 35.14,
          sale: 200,
          content: 'KwikSafety 北卡罗来纳州夏洛特 THU... ',
        },
        {
          id: 5,
          image:
              'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
          price: 35.15,
          sale: 200,
          content: 'KwikSafety 北卡罗来纳州夏洛特 THU... ',
        },
        {
          id: 6,
          image:
              'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
          price: 35.16,
          sale: 200,
          content: 'KwikSafety 北卡罗来纳州夏洛特 THU... ',
        },
        {
          id: 7,
          image:
              'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
          price: 35.17,
          sale: 200,
          content: 'KwikSafety 北卡罗来纳州夏洛特 THU... ',
        },
        {
          id: 8,
          image:
              'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
          price: 35.18,
          sale: 200,
          content: 'KwikSafety 北卡罗来纳州夏洛特 THU... ',
        },
      ],
      shopInfo: {},
      // 推荐商品
      liveList: [],
      // 全部商品
      allList: [],
      queryParams: {
        page: 1,
        type: 'live',
      },
      liveLoading: false,
      liveFinished: true,
      allLoading: false,
      allFinished: true,
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    collect(type) {
      if (this.isLogin) {
        // 收藏的接口
        requestFollowStoreApi({
          shoplist_id: this.$route.params.id,
          type: type,
        }).then((res) => {
          Toast.success({
            message:
                type === 1
                    ? this.$t('h.COLLECTION_SUCCESS')
                    : this.$t('h.CANCEL_COLLECTION_SUCCESS'),
          });
          this.isCollect = type === 1 ? 1 : 0;
        });
      } else {
        this.$router.push('/login');
      }
    },
    toClick(path, item) {
      this.$router.push({
        path: path,
        query: {
          id: item.id,
          shop: this.shopInfo.id,
        },
      });
    },
    getList() {
      let self = this;
      shopDetails({
        ids: this.$route.params.id,
        ...self.queryParams,
      }).then((res) => {
        self.shopInfo = {
          ...res.data.shop,
          followers: res.data.followers,
        };
        this.isCollect = res.data.followers;
        if (this.queryParams.type == 'live') {
          self.liveList = [...self.liveList, ...res.data.list.data];
          self.liveLoading = false;
          if (
              self.queryParams.page == res.data.list.last_page ||
              res.data.list.total === 0
          ) {
            this.liveFinished = true;
          } else {
            this.liveFinished = false;
          }
        } else {
          self.allList = [...self.allList, ...res.data.list.data];
          self.allLoading = false;
          if (
              self.queryParams.page == res.data.list.last_page ||
              res.data.list.data.length == 0 ||
              res.data.list.last_page === 0
          ) {
            self.allFinished = true;
          } else {
            this.allFinished = false;
          }
        }
      });
    },
    liveOnLoad() {
      let self = this;
      self.liveLoading = true;
      self.queryParams.page++;
      setTimeout(() => {
        self.getList();
      });
    },
    allOnLoad() {
      let self = this;
      self.allLoading = true;
      self.queryParams.page++;
      setTimeout(() => {
        self.getList();
      });
    },
  },
  created() {
    let self = this;
    self.getList();
  },
  watch: {
    active(newVal) {
      let self = this;
      if (newVal === 1) {
        self.queryParams.type = 'all';

        self.getList();
      }
      self.queryParams.page = 1;
    },
  },
};
</script>

<style scoped lang="scss">
.store-name-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 10px;
  .name {
    flex: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.store-main {
  width: 100%;

  .header-store {
    width: 100%;
    height: 200px;
    background: url('../../assets/image/bg.c4aa35c5.png') center center / 100% 100% no-repeat;

    .header {
      width: 100%;
      height: 40px;
      display: flex;
      padding: 3%;
      box-sizing: border-box;
      justify-content: space-between;

      span {
        color: #fff;

        img {
          height: 16px;
        }
      }
    }

    .shop-nav {
      width: 100%;
      height: 80px;
      position: relative;
      margin-top: 20px;

      .collect-bar {
        position: absolute;
        right: 0;
        top: 25px;
        min-width: 110px;
        gap: 5px;
        z-index: 999;
        height: 25px;
        background: #002fff;
        border-top-left-radius: 20px;
        border-bottom-left-radius:20px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }

      .left {
        width: 100%;
        height: 80px;
        font-size: 18px;
        color: #fff;
        display: flex;
        padding: 3%;
        align-items: center;
        box-sizing: border-box;

        img {
          height: 60px;
          width: 60px;
          border-radius: 50%;
        }

        P {
          margin-left: 10px;
        }
      }
    }
  }

  .store-nav {
    width: 100%;

    .goods-list {
      width: 100%;
      padding: 3%;
      box-sizing: border-box;

      .product-item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .item {
          margin-bottom: 10px;
          width: 160px;
          min-height: 220px;
          padding: 6px;
          border: 1px solid #f6f6f6;

          img {
            width: 160px;
            height: 160px;
          }

          .item-price {
            margin-top: 10px;
            width: 100%;
            color: #002fff;
            font-size: 16px;
            font-weight: 500;
          }

          .item-sale {
            width: 100%;
            color: #999;
            font-size: 10px;
            margin: 5px 0;
          }

          .item-content {
            width: 100%;
            color: #000;
            font-size: 14px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -moz-box-orient: vertical;
            box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }

    .give-other-list {
      width: 100%;
      padding: 3%;
      box-sizing: border-box;

      .product-nav {
        width: 100%;

        padding: 0 3%;
        box-sizing: border-box;
        height: 45px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .search {
          height: 30px;
        }

        .nav {
          width: 80%;
          height: 30px;
          display: flex;

          //background: #002FFF;
          .item {
            height: 40px;
            width: 50%;
            font-size: 14px;
            text-align: center;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            box-sizing: border-box;

            p {
              width: 100%;
              height: 30px;
              line-height: 40px;
              text-align: center;
              color: #999;
            }

            .active {
              color: #000;
            }

            span {
              width: 70%;
              height: 2.5px;
              border-radius: 3px;
              display: flex;
              background: #002fff;
            }
          }

          .input {
            width: 100%;
            height: 28px;
            background: #f6f6f6;
            font-size: 12px;
            display: flex;
            align-items: center;
            border-radius: 14px;

            img {
              height: 30px;
            }
          }
        }
      }

      .product-top {
        width: 100%;
        justify-content: space-between;

        .item-nav {
          width: 20%;
          font-size: 14px;
          text-align: left;
        }

        .center {
          width: 50px;
          display: flex;
          align-items: center;

          img {
            margin-left: 5px;
            height: 16px;
          }
        }
      }

      .product-nav-goods {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 80px;

        .product-box {
          display: flex;
          flex-wrap: wrap;

          .item {
            position: relative;
            margin-bottom: 10px;
            width: 160px;
            min-height: 220px;
            padding: 6px;
            border: 1px solid #f6f6f6;

            .item-tip {
              position: absolute;
              right: 0;
              top: 0;
              height: 35px;
              background-position: top center;
              background: url('../../assets/image/sell.png') 50% 50%;
              border-bottom-left-radius: 50%;
              border-bottom-right-radius: 50%;
              width: 35px;
              display: flex;
              justify-content: center;
              flex-wrap: wrap;
              padding: 5px 0;
              box-sizing: border-box;

              p {
                color: #fff;
                width: 100%;
                text-align: center;
                font-size: 8px;
              }
            }

            img {
              width: 160px;
              height: 160px;
            }

            .item-price {
              margin-top: 10px;
              width: 100%;
              color: #002fff;
              font-size: 16px;
              font-weight: 500;
            }

            .item-sale {
              width: 100%;
              color: #999;
              font-size: 10px;
              margin: 5px 0;
            }

            .item-content {
              width: 100%;
              color: #000;
              font-size: 14px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -moz-box-orient: vertical;
              box-orient: vertical;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
}
</style>
